<template>
  <RkContainer :isFooter="false"
    :isAside="true"
    :isHeader="false">
    <template #header_left></template>
    <template #header_right>
      <el-button type="primary"
        @click="handleAdd">新增</el-button>
      <el-button @click="handleEdit">修改</el-button>
      <el-button>删除</el-button>
    </template>
    <template #aside>
      <RkRoleTree @nodeClick="handleRoleTreeNodeClick" />
    </template>
    <template #main>
      <rk-center>
        <template #content>
          <RkMenuTree ref="menuTreeNodeRef"
            v-show="menuTreeShow"
            :showRootNode="false"
            :roleCode="roleCode"
            :showSave="true"
            @save='handleSave' />
          <div class="auto-menu-empty"
            v-show="!menuTreeShow">
            请选择左侧角色信息
          </div>
        </template>
      </rk-center>
    </template>
  </RkContainer>
</template>

<script setup>
import { RkMenuTree, RkRoleTree } from '@/components/tree/index.js'
import { ElMessage } from 'element-plus'
import { useRoleApi } from '@/api/index.js'

const { bindRoleMenu } = useRoleApi()
// ----- 角色树结构操作
const menuTreeShow = ref(false)
const roleCode = ref('')
const roleTreeSelectNode = ref({})
const handleRoleTreeNodeClick = (data, treeNode) => {
  roleCode.value = data.roleId
  menuTreeShow.value = true
  roleTreeSelectNode.value = data
}

// ----- 菜单树结构操作
const menuTreeNodeRef = ref()
const handleSave = (checkedKeys, close) => {
  let params = {
    roleCode: roleTreeSelectNode.value.roleId,
    menuCodes: checkedKeys.join(',')
  }
  bindRoleMenu(params).then(res => {
    const { code, msg } = res
    if (code === 200) {
      ElMessage.success('保存成功！')
    } else {
      ElMessage.error(msg)
    }
  }).catch(err => {
    ElMessage.error('保存失败！')
  }).finally(() => {
    close()
  })
}

</script>

<style lang="scss" scoped>
.auto-menu-empty {
	height: 100%;
	font-size: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>